<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门Demo</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<!-- 声明式渲染 -->
		<h3>初体验</h3>
		<div id="app" v-bind:title="title">
			{{ message }}
		</div>
		<hr>
		
		<!-- 条件判断 -->
		<h3>条件判断</h3>
		<p>当前系统时间：<span id="tt">{{time}}</span></p>
		<p id="vp" v-if="isJiShuSec">我是一个p标签，只有当时间当前系统秒数是奇数时才显示</p>
		<hr>
		
		<!-- 循环 -->
		<h3>循环</h3>
		<div id="loopDemo">
			<b>中国古代四大名著</b>
			<ul>
				<li v-for="book in books">{{book}}</li>
			</ul>
		</div>
		<hr>
		
		<!-- 用户输入 -->
		<div id="input">
			<h3>处理事件</h3>
			<p>{{msg}}</p>
			<button v-on:click="reverseMessage">反转消息</button>
		</div>
		
		<!-- 表单值双向绑定 -->
		<div id="form">
			<h3>表单值双向绑定</h3>
			<input type="text" v-bind:value="user">
		</div>
	</body>
	<script type="text/javascript">
		let now = new Date();
		let app = new Vue({
			el: '#app',
			data: {
				message: 'Hello World!',
				title: 'vue demo'
			}
		});
		
		let app2 = new Vue({
			el: '#vp',
			data: {
				isJiShuSec: (now.getSeconds() % 2 != 0)
			}
		});
		
		let app3 = new Vue({
			el: '#tt',
			data: {
				time: now.toLocaleString()
			}
		});
		
		let app4 = new Vue({
			el: '#loopDemo',
			data: {
				books:['西游记', '红楼梦', '三国演义', '水浒传']
			}
		});
		
		let app5 = new Vue({
			el: '#input',
			data: {
				msg: '我是中国人民解放军'
			},
			methods:{
				reverseMessage: function() {
					this.msg = this.msg.split('').reverse().join('');
				}
			}
		});
		
		let app6 = new Vue({
			el: '#form',
			data: {
				user: '用户名'
			}
		});
		
	</script>
</html>
